<template>
  <section class="section-wrap">
    <el-tooltip v-if="(menuId == 318 || menuId == 332) && query.textName != 'countScoreRate'"
                class="item"
                effect="dark"
                :content="textTyep(query.textName)"
                placement="top-start">
      <span>{{digitalConversion(transitionText[query.textName])}}</span>
    </el-tooltip>
    <span v-else-if="query.textName == 'countScoreRate'">
      {{transitionText[query.textName]?((transitionText[query.textName]).toFixed(1)):'0.0'}}</span>
    <span v-else-if="query.rmsData == 'rate'">
      {{digitalConversion(transitionText[query.textName])}}</span>
    <span v-else-if="(query.rmsData == 'cost' || query.rmsData == 'fee' || query.textName == 'totalVolume' || 
                       query.textName == 'totalWeight') && query.textName != 'profits'">
      {{transitionText[query.textName]?((transitionText[query.textName]).toFixed(2)):'0.00'}}</span>
    <span v-else-if="query.textName == 'profits'">
      {{profits}}</span>
    <span v-else>
      {{transitionText?transitionText[query.textName]:0}}</span>
  </section>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "RmsInfo",
  props: {
    row: {
      type: Object,
      default: () => { }
    },
    query: {
      type: Object,
      default: () => { }
    },
    classFlag: {
      type: String,
      default: ""
    }
  },
  computed: {
    ...mapState({
      menuId: (state) => state.menu.menu.menuId
    }),
    transitionText () {
      return this.row ? this.row[this.query.rmsData] ? this.row[this.query.rmsData] : {} : {};
    },
    profits () {
      return (Number(this.row.cost.amountIncome) - Number(this.row.cost.amountCost)).toFixed(2);
    }
  },
  methods: {
    textTyep (data) {
      let text
      if (this.row.device && data != 'countScoreRate') {
        switch (data) {
          case 'countPickOntimeRate':
            text = '提货准时运单' + (this.row.device.countPickOntime ? this.row.device.countPickOntime : '0') + '/运单总数' + this.row.total.totalWaybillExclude
            break;
          case 'countDeliverOntimeRate':
            text = '送货准时运单' + (this.row.device.countDeliverOntime ? this.row.device.countDeliverOntime : '0') + '/运单总数' + this.row.total.totalWaybillExclude
            break;
          case 'countSignOntimeRate':
            text = '签收准时运单' + (this.row.device.countSignOntime ? this.row.device.countSignOntime : '0') + '/运单总数' + this.row.total.totalWaybill
            break;
          case 'countGoodsIntactRate':
            text = '货物完好运单' + (this.row.sign.countGoodsIntact ? this.row.sign.countGoodsIntact : '0') + '/已签收运单' + this.row.sign.countSign
            break;
          case 'countReceiptOntimeRate':
            text = '回单准时运单' + (this.row.device.countReceiptOntime ? this.row.device.countReceiptOntime : '0') + '/运单总数' + this.row.total.totalWaybillExclude
            break;
        }
      }
      return data = text
    },
    digitalConversion (data) {
      let value
      if (data == 100) {
        value = data + '%'
      } else if (data == 0 || !data) {
        value = '0%'
      } else {
        value = data.toFixed(2) + '%'
      }
      return value
    }
  }
};
</script>
<style scoped>
.section-wrap {
  width: 100%;
  display: -webkit-box;
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  /* white-space: pre-line; */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.red {
  width: 100%;
  display: -webkit-box;
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  /* white-space: pre-line; */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  color: var(--prev-color-text-red);
}
</style>
